<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>确认地址</title>
</head>
<style>
    .top-title:hover{
        cursor: pointer;
        color: #b31e22!important;
        underline: #b31e22!important;
    }

    .SearchBar input {
        height: 50px;
        width: 500px;
    }
    .selectBar {
        height: 60px;
    }
    .menuList{
        background-color: #efd0d0 !important;
        color: #FFFFFF!important;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
</style>
<body>
<div id="app">
    <template>
        <div style="font-size: 14px;">
            <div style="display: flex;height: 60px;padding: 0 320px;background-color: #f5f5f5;border-radius: 10px">
                <div v-show="visibleAlready" style="margin-top: 3px">
                    <el-col :span="6">
                        <el-avatar style="height: 50px;width:50px;" :src="User.userImg"></el-avatar>
                    </el-col>
                    <el-col :span="18" style="line-height:50px">
                        <span style="padding-right: 30px;line-height: 40px;color: #666;margin-left:30px">{{User.realName}}</span>
                    </el-col>
                </div>
                <div v-show="visibleNotYet" style="margin-top: 10px">
                    <span style="padding-right: 20px;line-height: 40px;color: #666;">欢迎光临淘书网,请</span>
                    <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpLogin">登录</el-button>
                    <span style="padding-right: 20px;line-height: 40px;">|</span>
                    <el-button type="text" style="color: #666" class="top-title" @click="jumpRegister">注册</el-button>
                </div>
                <div style="flex: 1;display: flex;">
                    <div style="flex: 0.75;"></div>
                    <div style="width: 300px;display: flex;">
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpPersonalCenter"> <i class="el-icon-user"></i>个人中心</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpCart"><i class="el-icon-shopping-cart-2"></i>购物车</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpOrders"><i class="el-icon-goods"></i>我的订单</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpCollect"><i class="el-icon-star-off"></i>我的收藏</el-button>
                        <el-button type="text" v-show="visibleAlready" style="color: #666;margin-right: 10px;" class="top-title" @click=" killSession"><i class="el-icon-switch-button"></i>退出登录</el-button>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <div style="margin-left: 300px;margin-right: 300px;margin-top: 20px" >
        <el-steps :active="1" finish-status="success"  align-center :space="300">
            <el-step title="选择图书" ></el-step>
            <el-step title="确认地址" ></el-step>
            <el-step title="订单核对"></el-step>
            <el-step title="付款成功"></el-step>
        </el-steps>
        <br>
        <span style="font-size: 15px;margin-top:25px">请选择收货地址：</span>
    </div>

    <el-col :span="20">
        <el-row v-for="(data,index) in dataList" :key="data.id">
        <div style="font-size: 20px;margin-top: 20px;margin-left: 300px;margin-right: 100px">
            <el-card class="box-card" style="width:auto;">
                <div slot="header" class="clearfix" >
                    <input type="radio" :id="data.id" :value="data" v-model="pick">
                    <label :for="data.id">
                        <span style="font-size: 15px">收货人：{{data.name}}</span>
                        <span style="margin-left:25%;font-size: 15px">手机号码：{{data.tel}}</span>
                    </label>
                </div>
                <div style="display: flex;flex-direction: row;justify-content: space-between">
                    <b style="width:90%"><span style="font-size: 25px;">{{data.address}}</span></b>
                    <div style="display: flex; align-items: center;">
                        <el-button style="float: right;" icon="el-icon-edit" type="info" circle @click="echo(data)"></el-button>
                    </div>
                </div>
            </el-card>
        </div>
        </el-row>
    </el-col>
    <el-col :span="4">
        <div style="margin-top: 200px;margin-bottom: 400px;">
            <el-button icon="el-icon-right" circle type="success" style="font-size:25px" @click="submitAddressee"></el-button>
        </div>
    </el-col>
    <el-dialog
            title="修改地址"
            :visible.sync="editVisible"
            center
            :close-on-click-modal = "false"
            width="30%">
        <el-form ref="editAddressee" :model="editDialog" :rules="rules">
            <el-row>
                <el-col>
                    <el-form-item label="收件人:" prop="name" >
                        <el-input v-model="editDialog.name" type="text"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="手机号码:" prop="tel">
                        <el-input v-model="editDialog.tel" type="text"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="地址:" prop="address" >
                        <el-input v-model="editDialog.address" type="textarea"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <br>
            <el-row>
                <el-col>
                    <el-form-item>
                        <div style="margin-left: 35%">
                            <el-button  type="primary" round @click="updateAddressee('editAddressee')">确定</el-button>
                            <el-button  round @click="editVisible= false">取消</el-button>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-dialog>
</div>
</body>
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>

<<script>
    new Vue({
        el: '#app',
        created() {
            //钩子函数，vue对象初始化后执行
            this.getUser()
            this.getOrdersId();
            this.showAddress();
        },
        mounted() {
            //页面加载完成后，发送异步请求，获取所有数据
        },
        methods: {
            submitAddressee(){
                if (!this.pick.id){
                    this.$message({
                        type: 'error',
                        message: '请选择收货地址信息!'
                    });
                }
                axios({
                    method:"post",
                    url:"/orders/submit?ordersId="+this.ordersId+"&addresseeId="+this.pick.id,
                }).then(resp =>{
                    if (resp.data.code == 1) {
                        // 重新查询数据
                        this.jumpOrdersDetails();
                    }
                })
            },
            echo(val){
                var _this = this;
                _this.editVisible= true;
                /**
                 * 采用深拷贝，引用类型，不会改变表单原始数据
                 * @type {any}
                 */
                _this.editDialog = JSON.parse(JSON.stringify(val));
            },
            updateAddressee() {
                this.$refs.editAddressee.validate((valid) => {
                        if (valid) {
                            axios.post("/address",
                                this.editDialog
                            ).then((res) => {
                                if (res.data.code==1) {   //修改成功
                                    // 弹出消息提示
                                    this.$message({
                                        type: 'success',
                                        message: '修改成功!'
                                    });
                                    this.showAddress();
                                    this.editVisible=false;
                                }
                            })
                        } else {
                            // 弹出消息提示
                            this.$message({
                                message: "信息填写错误",
                                type: 'error'
                            });
                        }
                    }
                );
            },
            showAddress(){
                axios({
                    method:"get",
                    url:"/address/list",//?userId="+_this.User.id,前台获取值为0，改用后台session接收id
                }).then(resp =>{
                    this.dataList=resp.data.data;
                    console.log(this.dataList)
                })
            },
            getOrdersId() {
                let url = window.location.href
                let p = url.split('?')[1]
                let params = new URLSearchParams(p)
                this.ordersId = params.get('ordersId')
                console.log(this.ordersId)
            },
            getUser() {//获取用户名
                //发送ajax请求
                axios({
                    method:"get",
                    url:"/user",
                }).then(resp =>{
                    this.User = resp.data;
                    console.log(this.User.realName);
                    if (this.User !== null && this.User !== ""&& this.User !==undefined) {
                        this.visibleNotYet = false;
                        this.visibleAlready= true;
                    }
                })
            },
            killSession() {//退出登录
                this.$confirm('确认退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.visibleNotYet = true;
                    this.visibleAlready = false;
                    //发送ajax请求
                    axios.post("/user/logout").then((res) => {

                    })
                    window.location.href = "../index.html"
                    this.$message({
                        message: '退出成功',
                        type: 'success'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            jumpAllBook(){
                window.location.href ="allBook.html";
            },
            jumpLogin(){
                location.href ="/login_page/login.jsp";
            },
            jumpRegister(){
                location.href ="/login_page/register.jsp";
            },
            jumpPersonalCenter(){
                location.href ="personCenter.html";
            },
            jumpCart(){
                location.href ="cart.html";
            },
            jumpOrders(){
                location.href ="orders.html";
            },
            jumpOrdersDetails(){
                window.location.href ="ordersDetails.html?ordersId="+this.ordersId;
            },
            jumpCollect(){
                location.href ="/user_page/collect.html";
            },
        },
        data() {
            return {
                User:[],//用户信息
                checkList:[],
                visibleNotYet:true,
                visibleAlready:false,
                editDialog:{},
                input:'',
                pick: '',
                ordersId: '',
                editVisible:false,
                //地址簿
                dataList:[
                    {realName:'xiao',tel:'123123',address:'123',id:1,value:'1'},//id不能为‘’（字符），单选id索引需要“”（字符串或数字）
                    {realName:'xiao',tel:'123123',address:'123',id:2,value:'2'},
                ],
                rules: {//校验规则
                    name:[{required: true, message: '请输入收件人姓名', trigger: 'blur'}],
                    tel: [
                        {required: true, message: "请输入手机号码", trigger: "blur"},
                        {
                            validator: function (rule, value, callback) {
                                if (/^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i.test(value) == false) {
                                    callback(new Error("请输入正确的13位手机号码"));
                                } else {
                                    //校验通过
                                    callback();
                                }
                            },
                            trigger: "blur"
                        }
                    ],
                    address: [
                        {required: true, message: '请输入收件地址', trigger: 'blur'}]
                }
            }
        }
    })
</script>
</html>